$('.site-mast li').mouseover(function () {
    var index = $(this).index();
    $(this).addClass('activer-bgc').siblings().removeClass('activer-bgc')

    $('.categorys-items-layer').each(function (index, value) {
        $(value).removeClass('active-dis')
    })

    $(this).children('.categorys-items-layer').addClass('active-dis')

})


$('.site-mast li a').mouseover(function () {
    $(this).css({ color: 'red' })
})
$('.makeup .makeup-top li').mouseover(function () {
    $('.site-mast').css({ display: 'none' })

})
$('.site-mast li a').mouseout(function () {
    $(this).css({ color: '' })
})


$('.fenlei').mouseover(function () {
    $('.site-mast').css({ display: 'block' })
})

$('.site-mast ul li').mouseover(function (e) {
    $('.site-mast').css({ display: 'block' })
})
$('.categorys-items-layer').mouseover(function (e) {
    $('.site-mast').css({ display: 'block' })
})
$('.site-mast').mouseout(function (e) {
    $(this).css({ display: 'none' })
})

$('.dressing .left ').mouseover(function () {
    $(this).addClass('activer-ff')
    $('.border1').css({ display: 'block' })
    $('.dressing #left-buttom').css({ display: 'block' })
})

$('.dressing .left ').mouseout(function () {
    $(this).removeClass('activer-ff')
    $('.border1').css({ display: 'none' })
    $('.dressing #left-buttom').css({ display: 'none' })
})

// 渲染数据
// 热门推荐数据
var rel = '';
$(fdata1).each(function (index, value) {
    rel += `
    <li>
    <div class="Img"><img src="${value.imgurl}" alt="" width="100%"></div>
    <div class="content">
        <div class="content-text1"><a href=''>${value.text}</a></div>
        <div class="red">${value.jinqian}</div>
        <div class="go">${value.btn}</div>
    </div>
</li>
    `
})
$('.recommend ul').html(rel)

$('.recommend ul li').mouseover(function () {
    $(this).addClass('activer-ber')
})
$('.recommend ul li').mouseout(function () {
    $(this).removeClass('activer-ber')
})
$('.recommend ul li a').mouseover(function () {
    $(this).addClass('active-red')
})
$('.recommend ul li a').mouseout(function () {
    $(this).removeClass('active-red')
})


// 猜你喜欢
var rel2 = '';
$(fdata4).each(function (index, value) {
    rel2 += `
    <li>
    <div class="Img"><img src="${value.imgurl}" alt="" width="100%"></div>
    <div class="pice">${value.jinqian}</div>
    <div class="">${value.text}</div>
    <div class="">${value.num}</div>
    </li>
    `
})
$('.link-love ul').html(rel2)




// 推广商品

function rel3() {
    var rel3 = ''
    $(fdata5).each(function (index, value) {
        rel3 += `
        <li>
                <div class="top">
                    <img src="${value.imgurl}" alt="" width="100%">
                </div>
                <div class="pice">
                     <div class="pice-som">${value.jinqian}</div>
                 </div>
                <div${value.text}</div>
                <div class="cbl">臭宝莲</div>
                <div>已售<span>${value.shou}</span>件</div>
        </li>
        `
    })
    $('.goods-spread ul').html(rel3)
}
rel3()
$('.goods-spread ul li').mouseover(function () {
    $(this).find('img').css({ opacity: '0.5' })
})
$('.goods-spread ul li').mouseout(function () {
    $(this).find('img').css({ opacity: '1' })
})




// 主要商品栏



// 渲染页面方法大图
function dom() {
    var rel5 = '';
    $(fdata2).each(function (index, value) {
        var rel6 = ''
        $(value.url1).each(function (index, value) {
            rel6 += `
      <img src="${value}" alt="" width="100%">
        `
        })
        rel5 += `
        <li>
    <div class="top">

      <a href="../dp-tiaozhaun.html?id=${value.iptid}"><img src="${value.imgurl}" alt="" width="100%"></a>
      </div>
      <div class="som">
      ${rel6}
      </div>
      <div class="pice">
      <div class="pice-som">￥${value.jinqian}</div>
      <div>已售${value.shou}件</div>
      </div>
      <div><a href='../dp-tiaozhaun.html?id=${value.iptid}' class='mether'>${value.text}</a></div>
      <div class="cbl">${value.kefu}</div>
      <div class="flex">
      <div id='${value.iptid}'>
      <i class="iconfont icon-24gl-square"></i>
      对比
      </div>
      <div>
      <i class="iconfont icon-aixin"></i>
      搜藏
      </div>
      <div class='cheche' value='${value.iptid}'>
      <i class="iconfont icon-gouwucheman"></i>
      加入购物车
      </div>
      </div>
      </li>
      `
    })
    $('.goods').eq(0).children('.big-icon').html(rel5)

    $('.goods').children('ul').eq(0).children('li').mouseover(function () {
        $(this).css({ boxShadow: '0 0 4px 0 rgb(85 85 85 / 40%)' })
    })
    $('.goods').children('ul').eq(0).children('li').mouseout(function () {
        $(this).css({
            boxShadow: 'none'
        })
    })
}
dom()
// 渲染页面方法小图
function bigIcon() {
    var rel5 = '';
    $(fdata2).each(function (index, value) {
        rel5 += `
        <li>
        <div class="flex-b"> 
            <div class="Img-small-icon">
                <a href='../dp-tiaozhaun.html?id=${value.iptid}'><img src="${value.imgurl}" alt="" width="100%"></a>
            </div>
            <div class="content">
            <a href='../dp-tiaozhaun.html?id=${value.iptid}'><p>${value.text}</p></a>
                <p>销量${value.shou}&nbsp;&nbsp;&nbsp; 评价${value.ping}</p>
            </div>
        </div>
        <div class="mbl">${value.kefu}</div>
        <div class="pice">
            <div>
                <span class="red">￥${value.jinqian}</span>
                <span id="delel">${value.jinqian2}</span>
            </div>
        </div>
        <div class="contrast">
            <div id='${value.iptid}'>
                <i class="iconfont icon-24gl-square"></i>
                对比
            </div>
            <div>
                <i class="iconfont icon-aixin"></i>
                搜藏
            </div>
            <div class='cheche' value='${value.iptid}'>
                <i class="iconfont icon-gouwucheman"></i>
                加入购物车
            </div>
        </div>
    </li>
      `
    })
    $('.goods').eq(0).children('.small-icon').html(rel5)
var count = 0
$('.cheche').on('click', function () {
    var cart = $('.cart-nav');
    
    // var imgtodrag = $(this).parent('.contrast').parent('li').children('.flex-b').find('img').eq(0);
    var imgtodrag = $(this).parent().parent().find('img').eq(0);
    if (imgtodrag) {
        var imgclone = imgtodrag.clone().offset({
            top: imgtodrag.offset().top,
            left: imgtodrag.offset().left
        }).css({
            'opacity': '1',
            'position': 'absolute',
            'height': '100px',
            'width': '100px',
            'z-inde': '999'
        }).appendTo($('body')).animate({
            'top': cart.offset().top,
            'left': cart.offset().left,
            'width': 30,
            'height': 30
        }, 2000);
        setTimeout(function () {
            count++;
            $(".item-count").text(count);
        }, 2200);

        imgclone.animate({
            'width': 0,
            'height': 0
        }, function () {
            $(this).detach()
        })
    }else{
        console.log(false);
    }
})

}
bigIcon()


// 没有商品的数据
function rell() {

    rel2 = `
    <li class='add'>
        <div><img src="../images/not-wait-icon.png"></div>
        <div>没有您想要的商品项<div><a>返回首页</a></div></div>
    </li>
    `
    $('.ul-right').css({ display: 'none' })
    $('.goods').eq(0).children('ul').html(rel2)
    $('.add').css({
        padding: '100px 200px',
        width: '1390px',
        display: "flex",
        fontSize: '18px',
        justifyContent: ' center',
        background: 'white',
    })
    $('.add div').eq(0).css({
        marginRight: '50px'
    })
    $('.add div a').css({
        backgroundColor: '#ff534c',
        padding: '10px',
        marginTop: '20px',
        lineHeight: '70px'
    })
}


// 自营商品的数据

function zhiying() {
    var rel5 = '';
    for (var i = 0; i < fdata2.length; i++) {
        if (fdata2[i].kefu.includes('商创自营')) {
            rel5 += `
    <li>
<div class="top">

  <a href="../dp-tiaozhaun.html?id=${fdata2[i].iptid}"><img src="${fdata2[i].imgurl}" alt="" width="100%"></a>
  </div>
  <div class="som">
  <img src="" alt="" width="100%">
  </div>
  <div class="pice">
  <div class="pice-som">￥${fdata2[i].jinqian}</div>
  <div>已售${fdata2[i].shou}件</div>
  </div>
  <div><a href='../dp-tiaozhaun.html?id=${fdata2[i].iptid}' class='mether'>${fdata2[i].text}</a></div>
  <div class="cbl">${fdata2[i].kefu}</div>
  <div class="flex">
  <div id='${fdata2[i].iptid}'>
  <i class="iconfont icon-24gl-square"></i>
  对比
  </div>
  <div>
  <i class="iconfont icon-aixin"></i>
  搜藏
  </div>
  <div class='cheche' value='${fdata2[i].iptid}'>
  <i class="iconfont icon-gouwucheman"></i>
  加入购物车
  </div>
  </div>
  </li>
  `
        }
    }
    $('.goods').eq(0).children('ul').html(rel5)
    $('.goods').eq(0).children('.small-icon').html(rel5)

    $('.goods').children('ul').eq(0).children('li').mouseover(function () {
        $(this).css({ boxShadow: '0 0 4px 0 rgb(85 85 85 / 40%)' })
    })
    $('.goods').children('ul').eq(0).children('li').mouseout(function () {
        $(this).css({
            boxShadow: 'none'
        })
    })
}



function jinxianshiyouhua() {
    var rel5 = '';
    for (var i = 0; i < fdata2.length; i++) {
        if (fdata2[i].ping > 0) {
            rel5 += `
            <li>
        <div class="top">
        
          <a href="../dp-tiaozhaun.html?id=${fdata2[i].iptid}"><img src="${fdata2[i].imgurl}" alt="" width="100%"></a>
          </div>
          <div class="som">
          <img src="" alt="" width="100%">
          </div>
          <div class="pice">
          <div class="pice-som">￥${fdata2[i].jinqian}</div>
          <div>已售${fdata2[i].shou}件</div>
          </div>
          <div><a href='' class='mether'>${fdata2[i].text}</a></div>
          <div class="cbl">${fdata2[i].kefu}</div>
          <div class="flex">
          <div id='${fdata2[i].iptid}'>
          <i class="iconfont icon-24gl-square"></i>
          对比
          </div>
          <div>
          <i class="iconfont icon-aixin"></i>
          搜藏
          </div>
          <div class='cheche' value='${fdata2[i].iptid}'>
          <i class="iconfont icon-gouwucheman"></i>
          加入购物车
          </div>
          </div>
          </li>
          `
        }
    }
    $('.goods').eq(0).children('ul').html(rel5)
    $('.goods').eq(0).children('.small-icon').html(rel5)

    $('.goods').children('ul').eq(0).children('li').mouseover(function () {
        $(this).css({ boxShadow: '0 0 4px 0 rgb(85 85 85 / 40%)' })
    })
    $('.goods').children('ul').eq(0).children('li').mouseout(function () {
        $(this).css({
            boxShadow: 'none'
        })
    })
}


// 销量
var num = 1;
$('.give ul').children('li').eq(1).click(function () {
    num++
    if (num % 2 == 0) {
        $('.goods').eq(0).children('ul').html(null)
        fdata2.sort(function (a, b) {
            return Number(b.shou) - Number(a.shou)
        })
        dom()
        bigIcon()
        big_icons()
        smll_icons()
        goshe()
    } else {
        $('.goods').eq(0).children('ul').html(null)
        fdata2.sort(function (a, b) {
            return Number(a.shou) - Number(b.shou)
        })
        dom()
        bigIcon()
        big_icons()
        goshe()
        smll_icons()
    }

})
// 评论数
$('.give ul').children('li').eq(3).click(function () {
    fdata2.sort(function (a, b) {
        return Number(b.ping) - Number(a.ping)
    })
    dom()
    bigIcon()
    big_icons()
    goshe()
    smll_icons()

})
// 价格
var num1 = 1;
$('.give ul').children('li').eq(4).click(function () {
    num++
    if (num % 2 == 0) {
        $('.goods').eq(0).children('ul').html(null)
        fdata2.sort(function (a, b) {
            return Number(b.jinqian) - Number(a.jinqian)
        })
        dom()
        bigIcon()
        big_icons()
        smll_icons()
        goshe()
    } else {
        $('.goods').eq(0).children('ul').html(null)
        fdata2.sort(function (a, b) {
            return Number(a.jinqian) - Number(b.jinqian)
        })
        dom()
        bigIcon()
        big_icons()
        smll_icons()
        goshe()
    }

})
// 价格区间
$('.give .left .pice').children('input').eq(1).on('blur', function () {
    var val1 = Number($('.give .left .pice').children('input').eq(0).val())
    var val2 = Number($('.give .left .pice').children('input').eq(1).val())
    var rel5 = '';
    if (val1 > val2) {
        $('.mengcheng').css({ display: 'block' })
        $('.mengcheng button').click(function () {
            $('.mengcheng').css({ display: 'none' })
            $('.give .left .pice').children('input').val(null)
        })
    }
    for (var i = 0; i < fdata2.length; i++) {
        if (Number(val1) <= Number(fdata2[i].jinqian) && Number(val2) >= Number(fdata2[i].jinqian)) {
            rel5 += `
                <li>
            <div class="top">
              <a href="../dp-tiaozhaun.html?id=${fdata2[i].iptid}"><img src="${fdata2[i].imgurl}" alt="" width="100%"></a>
              </div>
              <div class="som">
              <img src="" alt="" width="100%">
              </div>
              <div class="pice">
              <div class="pice-som">￥${fdata2[i].jinqian}</div>
              <div>已售${fdata2[i].shou}件</div>
              </div>
              <div><a href='../dp-tiaozhaun.html?id=${value.iptid}' class='mether'>${fdata2[i].text}</a></div>
              <div class="cbl">${fdata2[i].kefu}</div>
              <div class="flex">
              <div>
              <i class="iconfont icon-24gl-square"></i>
              对比
              </div>
              <div>
              <i class="iconfont icon-aixin"></i>
              搜藏
              </div>
              <div class='cheche' value='${value.iptid}'>
              <i class="iconfont icon-gouwucheman"></i>
              加入购物车
              </div>
              </div>
              </li>
              `


            $('.goods').eq(0).children('ul').html(rel5)
            $('.goods').children('ul').eq(0).children('li').mouseover(function () {
                $(this).css({ boxShadow: '0 0 4px 0 rgb(85 85 85 / 40%)' })
            })
            $('.goods').children('ul').eq(0).children('li').mouseout(function () {
                $(this).css({
                    boxShadow: 'none'
                })
            })

        }
    }
})



// 新品
$('.give ul').children('li').eq(2).click(function () {
    fdata2.sort(function (a, b) {
        return a.time - b.time
    })
    dom()
    bigIcon()
    big_icons()
    smll_icons()
    goshe()

})


// 包邮
$('input[type=checkbox]').eq(0).click(function () {
    // var rel2 = ''
    if (!$(this).is(':checked') && !$(this).next().next().is(':checked') && !$(this).next().next().next().next().is(':checked')) {
        dom()
        $('.ul-right').css({ display: 'block' })
        bigIcon()
        smll_icons()
        big_icons()
        goshe()


    }
    if ($(this).is(':checked')) {
        rell()

    }
    if ($(this).is(':checked') && $(this).next().next().is(':checked')) {
        // dom()
        rell()
    }
    if (!$(this).is(':checked') && $(this).next().next().is(':checked')) {
        zhiying()
        big_icons()
        goshe()
        smll_icons()

        $('.ul-right').css({ display: 'block' })
    }
    if ($('input[type=checkbox]').eq(0).is(':checked')) {
        rell()
    }
    if (!$(this).is(':checked') && $('input[type=checkbox]').eq(2).is(':checked')) {
        jinxianshiyouhua()
        big_icons()
        goshe()
        smll_icons()

        $('.ul-right').css({ display: 'block' })

    }
})


// 自营商品
$('input[type=checkbox]').eq(1).change(function () {
    if ($(this).is(':checked')) {
        zhiying()
        big_icons()
        smll_icons()
        goshe()

        $('.ul-right').css({ display: 'block' })
    }
    if ($(this).prev().prev().is(':checked')) {
        rell()
    }
    if (!$(this).prev().prev().is(':checked') && !$(this).is(':checked')) {
        dom()
        bigIcon()
        big_icons()
        smll_icons()
        goshe()

        $('.ul-right').css({ display: 'block' })

    }
    if (!$(this).is(':checked') && $('input[type=checkbox]').eq(2).is(':checked')) {
        jinxianshiyouhua()
        big_icons()
        goshe()
        smll_icons()
    }
    if ($('input[type=checkbox]').eq(0).is(':checked')) {
        rell()
        // $('.ul-right').css({ display: 'block' })
    }
    if ($('input[type=checkbox]').eq(2).is(':checked')) {
        jinxianshiyouhua()
        big_icons()
        smll_icons()
        goshe()

    }
    if ($('input[type=checkbox]').eq(0).is(':checked')) {
        rell()
    }
})


// 仅显示有货
$('input[type=checkbox]').eq(2).change(function () {
    if (!$('input[type=checkbox]').eq(0).is(':checked') && $(this).is(':checked')) {
        jinxianshiyouhua()
        smll_icons()
        big_icons()
        goshe()

    }
    if ($('input[type=checkbox]').eq(1).is(':checked') && $(this).is(':checked')) {
        zhiying()
        big_icons()
        goshe()
        smll_icons()

    }
    if (!$('input[type=checkbox]').eq(1).is(':checked') && $(this).is(':checked')) {
        jinxianshiyouhua()
        big_icons()
        goshe()
        smll_icons()

    }
    if ($('input[type=checkbox]').eq(0).is(':checked') && $(this).is(':checked') || $('input[type=checkbox]').eq(0).is(':checked')) {
        rell()
        // $('.ul-right').css({ display: 'block' })
    }
    if (!$(this).is(':checked')) {
        dom()
        bigIcon()
        big_icons()
        goshe()
        smll_icons()

    }
    if (!$(this).is(':checked') && $(this).prev().prev().is(':checked')) {
        zhiying()
        big_icons()
        goshe()
        smll_icons()

    }
    if (!$(this).is(':checked') && $(this).prev().prev().is(':checked') && $(this).prev().prev().prev().prev().is(':checked')) {
        rell()
    }
    if (!$(this).is(':checked') && !$(this).prev().prev().is(':checked') && $(this).prev().prev().prev().prev().is(':checked')) {
        rell()

    }

})

// 大图切小图
$('.give .right').children('ul').find('li').eq(1).click(function () {
    $('.big-icon').css({ display: 'block' })
    $('.small-icon').css({ display: 'none' })

})

$('.give .right').children('ul').find('li').eq(2).click(function () {
    $('.big-icon').css({ display: 'none' })
    $('.small-icon').css({ display: 'block' })

})

var num12 = 1;
$('.stift').click(function () {
    num12++
    if (num12 % 2 == 0) {
        $('.makeup .ul-right').css({ 'marginRight': -220 })
        $('.goods-spread').css('opacity', '0')
    } else {
        $('.makeup .ul-right').css({ 'marginRight': 0 })
        $('.goods-spread').css('opacity', '1')

    }
})



// 点击对比
var arrData = []
// 大xiao图对比
function big_icons() {
    $('.goods').eq(0).find('.flex').children('[id]').click(function (e) {
        $('.comparison ').css('opacity', '1')
        var id = $(this).attr('id')
        dataid = $(this).attr('id')
        for (var i = 0; i < fdata2.length; i++) {
            if (fdata2[i].iptid == id) {
                arrData.push(fdata2[i])
            }
            if (arrData.length > 4) {
                alert('最多四个')
                arrData.length = 4
            }

        }
        // 对比栏数据渲染
        var rel7 = ''
        for (var j = 0; j < arrData.length; j++) {
            arrData[j].index = j
            rel7 += `
            <div class="flex-weqp">
            <div class="Img"><img src="${arrData[j].imgurl}" alt="" width="100%"></div>
            <div class="right">
              <p>${arrData[j].text}</p>
              <p><span>￥${arrData[j].jinqian}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span  class="delents" id='${arrData[j].iptid}'>删除</span></p>
            </div>
          </div>
            `
            $('.comparison .content').html(rel7)
        }
        delet()
        yinchang()
        qingkong()
    })

}
big_icons()
function smll_icons() {
    $('.goods').eq(0).find('.contrast').children('[id]').click(function (e) {
        $('.comparison ').css('opacity', '1')
        var id = $(this).attr('id')
        dataid = $(this).attr('id')
        for (var i = 0; i < fdata2.length; i++) {
            if (fdata2[i].iptid == id) {
                arrData.push(fdata2[i])
            }
            if (arrData.length > 4) {
                alert('最多四个')
                arrData.length = 4
            }

        }
        // 对比栏数据渲染
        var rel7 = ''
        for (var j = 0; j < arrData.length; j++) {
            arrData[j].index = j
            rel7 += `
            <div class="flex-weqp">
            <div class="Img"><img src="${arrData[j].imgurl}" alt="" width="100%"></div>
            <div class="right">
              <p>${arrData[j].text}</p>
              <p><span>￥${arrData[j].jinqian}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span  class="delents" id='${arrData[j].iptid}'>删除</span></p>
            </div>
          </div>
            `
            $('.comparison .content').html(rel7)
        }
        delet()
        yinchang()
        qingkong()
    })

}
smll_icons()
// 删除
function delet() {
    var flex_weqp = document.querySelectorAll('.delents')
    for (var i = 0; i < flex_weqp.length; i++) {
        flex_weqp[i].index = i
        flex_weqp[i].onclick = function () {
            this.parentNode.parentNode.parentNode.remove()
            arrData.splice(arrData.includes(this.id), 1)
            if (arrData.length == 0) {
                $('.comparison ').css('opacity', '0')
            }
        }
    }

}

// 隐藏
function yinchang() {
    $('.hidden-File').find('p').click(function () {
        $('.comparison ').css('opacity', '0')
    })
}

// 清空
function qingkong() {
    $('.hidden-File').find('div').eq(1).click(function () {
        arrData.length = 0;
        $('.comparison ').css('opacity', '0')

    })
}



// 移入小图片切换大图
$('.big-icon .som').children('img').mouseover(function () {
    var imgSrc = $(this).prop('src')
    $(this).parents('.som').prev().find('img').prop('src', imgSrc)

})
// 动态渲染
var arrDaTa = []
var new_arr = []
var addIndex = []
var items = null;
function goshe() {
    $('.cheche').stop().on('click', function () {
        var rel22 = '';
        var dataID = $(this).attr('value')
        for (var i = 0; i < fdata2.length; i++) {
            if (fdata2[i].iptid == dataID) {
                arrDaTa.push(fdata2[i])
                for (var j = 0; j < arrDaTa.length; j++) {
                    items = arrDaTa[j]
                    if ($.inArray(items, new_arr) == -1) {
                        new_arr.push(items)
                    }
                }
            }

        }

        if (arrDaTa.length != 0) {
            $('.ecs-tbar-tipbox2').remove()
        }

        $(new_arr).each(function (index, value) {
            rel22 += `
            <li>
            <div><img src="${value.imgurl}" alt=""></div>
            <div class="content-gos">
                <p>${value.text}</p>
                <p class="gos-red">${value.jinqian2}</p>
                <div class="gos-btn">
                    <input type="button" value="-">
                    <span class="span_texT">1</span>
                    <input type="button" value="+">
                </div>
            </div>
        </li>
            `
        })
        $('.two_two_two_ul').html(rel22)
        // var imgtoDrag = $(this).parent('.flex').parent('li').children('.top').find('img');
        // var addindex = $(this).parents('li').index()

        // var span_texT = document.querySelectorAll('.span_texT')

        // for (var i = 0; i < span_texT.length; i++) {
        //     addIndex.push(i)
        // }

        // var Sto = Array.from(new Set(addIndex))
        // add_span(Sto, addindex)
        // var addFar = Number($('.span_texT').text());
        // $('.span_texT').text(addFar)
    })
}

goshe()






































